window.onload = function() {
    const li = document.querySelectorAll('.li'),
        imgList = document.getElementsByClassName('img')
    const ol = document.querySelectorAll('.li-o');
    var token = localStorage.getItem('mytoken')

    var adname = localStorage.getItem('name');
    const youname = document.querySelector('.yourname')
    youname.innerHTML = adname

    function getLocalTime(nS) {
        return new Date(parseInt(nS)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    }
    //跳转效果
    for (let i = 0; i < ol.length; i++) {
        ol[i].onclick = function() {
            if (i === 0) {
                window.location.href = '后台用户列表.html'
            } else if (i === 1) {
                // window.location.href = '后台漫画详情列表.html'
            } else if (i === 2) {
                window.location.href = '后台留言.html'
            } else if (i === 3) {
                window.location.href = '管理员.html'
            }
        }
    }


    const po = document.querySelector('.abs');
    po.addEventListener('click', function(e) {
        if (e.target.id === 'pers') {
            window.location.href = 'personMan.html'
        } else if (e.target.id === 'zh') {
            console.log(e.target);
            window.location.href = '后台漫画详情列表.html'

        }
        console.log(e.target);
    })

    var token = localStorage.getItem('mytoken')


    //点击侧边栏样式改变
    for (var i = 0; i < li.length; i++) {
        li[i].addEventListener('click', function() {
            for (var i = 0; i < li.length; i++) {
                li[i].className = ''
            }
            this.className = 'color'
        })
    }


    //侧边栏下拉列表效果
    console.log(imgList)
    var sum = 0;
    for (let i = 0; i < li.length; i++) {
        li[i].onclick = function() {
            // this.className = 'color'
            sum++;
            var h = i;
            if (sum % 2 !== 0) {
                ol[h].style.overflow = 'visible';
                ol[h].style.height = 52 + "px";
                imgList[h].style.transform = "rotateZ(90deg)";
                imgList[h].style.transition = 'all 0.2s';
            } else {
                ol[h].style.overflow = 'hidden';
                ol[h].style.height = 0;
                imgList[h].style.transform = 'rotateZ(0)'
                imgList[h].style.transition = 'all 0.2s'
            }
            console.log(ol);

            ol[h].addEventListener('click', function(e) {
                console.log(1111);
                sum = 0; //让sum一直为偶数 二级菜单不隐藏
            })
            console.log(sum);
        }



    }
    //点击汉堡图标侧边栏移动
    const hanbao = document.querySelector('.hanbao');
    const letf_nav = document.querySelector('.left-nav');
    var count = 0;
    const container = document.querySelector('.container')
    hanbao.onclick = function() {
        count++;
        if (count % 2 !== 0) {
            letf_nav.style.left = -220 + "px";
            container.style.width = 100 + '%'
            container.style.left = 0 + 'px';
            container.style.transition = 'all 0.2s'
        } else {
            letf_nav.style.left = 0 + "px";
            container.style.left = 220 + 'px'
                // container.style.left = 0 + 'px';
            container.style.transition = 'all 0.2s'
            container.style.width = 88.4 + '%'

        }
    }

    //点击修改弹出模态框
    const model = document.querySelector('.model')
    const up = document.querySelector('.dda');
    const news = document.getElementsByName('g');
    const boxx = document.querySelector('.boxx')
    const butt1 = document.querySelector('#butt1');
    const butt2 = document.querySelector('#butt2');
    // butt1.addEventListener('click', function() {
    //     boxx.style.display = 'none'
    // })
    // butt2.addEventListener('click', function() {
    //     boxx.style.display = 'display'
    // })
    const fwbk = document.querySelector('.w-e-text')
        // console.log();
        // butt1.addEventListener('click', function() {
        //     console.log(fwbk.value);
        //     console.log(1);
        // })
        //设置富文本框
    const E = window.wangEditor
    const editor = new E('#div1')
        // 或者 const editor = new E( document.getElementById('div1') )
        // editor.style.width = 500
    editor.create();
    // const butt1 = document.querySelector('#butt1');
    var isdisc = 0;

    up.addEventListener('click', function(e) {
        console.log(e.target);
        //判断修改按钮
        if (e.target.name === 'g') {

            boxx.style.display = 'block'
            const discid = e.target.dataset.id;
            console.log(discid);
            isdisc = discid
            dicTail(isdisc)

        }
        //判断删除按钮
        if (e.target.name === 'delete') {
            const flag = confirm('是否删除?')
            if (flag == true) {
                console.log('你点了确认');
                disDe(e.target.id)
            } else(
                console.log('你点了取消')
            )
        }
    })

    //模态框的关闭按钮
    const guanbi = document.querySelector('.guanbi');
    guanbi.onclick = function() {
        model.style.visibility = 'hidden'
    }

    //退出
    const logout = document.querySelector('.logout');
    logout.onclick = function() {
        window.location.href = 'login.html'
    }

    //添加按钮弹出模态框
    const looa = document.querySelector('.look');
    console.log(looa);
    looa.addEventListener('click', function() {
        boxx.style.display = 'block';
        console.log(1);
        isdisc = 0;
        console.log(isdisc);
        // getTail(isdisc)
    })
    console.log(isdisc);
    butt1.addEventListener('click', function() {
            if (isdisc === 0) {
                const selecta = document.querySelector('#selectadmin').value;

                const text1 = editor.txt.text();
                console.log(text1, selecta);
                // console.log(item.user_name, item.comment);

                disAdd(text1)
                boxx.style.display = 'none';
            }
        })
        //
    const admin = document.querySelector('.admin');
    const liLis = admin.getElementsByTagName('li');
    console.log(liLis);

    const sec = document.querySelector('.section');
    sec.addEventListener('mousemove', function() {
        admin.style.top = 50 + 'px';
        admin.style.opacity = 1;
        // admin.style.zIndex = -1

    })
    let timer;
    sec.addEventListener('mouseleave', function() {

        timer = setTimeout(function() {
            admin.style.top = 800 + 'px';
            admin.style.opacity = 0;
        }, 200)

    })
    admin.addEventListener('mousemove', function() {
        clearTimeout(timer)
        admin.style.top = 50 + 'px';
        admin.style.opacity = 1;
        admin.style.zIndex = 1001

    })

    admin.addEventListener('mouseleave', function() {
        let timer;
        timer = setTimeout(function() {
            admin.style.top = 800 + 'px';
            admin.style.opacity = 0;
        })


    })


    //获取admin下的li列表
    liLis[0].onclick = function() {
        window.location.href = 'imgManeger.html'
    }

    //文本关闭
    // const butt2 = document.querySelector('#butt2');
    butt2.addEventListener('click', function() {
            console.log(1);
            boxx.style.display = 'none'
        })
        //查询总管理员
    dicadmin();

    function dicadmin() {

        $.ajax({
            url: `http://192.168.3.184:7001/admin`,
            method: "GET",
            headers: {
                token
            },
            success: function(res) {
                console.log(res);
                const select = document.querySelector('#selectadmin');
                // console.log(div1);

                // select.innerHTML = ` <option value="">请选择管理员</option>`
                res.data.forEach(item => {
                    const option = document.createElement('option')
                    option.innerText = `${item.admin_name}`;
                    select.appendChild(option);

                })


            }
        })
    }



    function getPage2(page, pageSize) {
        $.ajax({
            url: `http://192.168.3.184:7001/discuss`,
            type: 'get',
            headers: {
                token
            },
            data: {
                page,
                pageSize
            },
            success: (res) => {
                console.log(res);




                const _content = document.querySelector('.dda')
                const showContent = () => {
                    //每次清空

                    _content.innerHTML = '';
                    _content.innerHTML = `<th width='80'>ID</th>
                    <th>头像</th>
                
                    <th>发表用户</th>
                    <th>评论</th>
                   
                    <th>发表时间</th>
                  
                    <th>操作</th>`
                    res.data.forEach((item, index) => {
                        console.log(item, index);
                        const time = getLocalTime(item.discuss_time)
                            //遍历计算方法，当前为第1页，一页2个，以此类推
                            // console.log(item, index);

                        // if (index >= (cur - 1) * pageSize && index < cur * pageSize) {
                        const tr = document.createElement('tr');
                        tr.innerHTML = `<td>${item.id}</td>
                            <td><img class='hear' src='http://192.168.3.184:7001/${item.head_portrait}' /> </td>
                         
                            <td>${item.user_name}</td>
                            <td>${item.comment}</td>
                            <td>${time}</td>
                            <td>
                            <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
                            <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                           
                          
                            </td>`
                            // <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />
                        _content.appendChild(tr)
                            // }
                    })
                }
                showContent()
                const showContena = () => {
                    //每次清空

                    _content.innerHTML = '';
                    _content.innerHTML = `<th>ID</th>
                    <th>标题</th>
                
                    <th>序号</th>
                   
                    <th>操作</th>`
                    res.data.forEach((item, index) => {
                        //遍历计算方法，当前为第1页，一页2个，以此类推
                        // console.log(item, index);

                        // if (index >= (cur - 1) * size && index < cur * size) {
                        const tr = document.createElement('tr');
                        tr.innerHTML = `<td>${item.id}</td>
                            <td>${item.title}</td>
                         
                            <td>${item.nshow}</td>
                          
                            <td>
                            <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                            <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
                           
                            </td>`
                        _content.appendChild(tr)
                            // }
                    })
                }

                // showContena()
            }
        })
    }



    kanliuyan(1, 6)

    function kanliuyan(page, pageSize) {
        // console.log(token_);
        $.ajax({
            url: `http://192.168.3.184:7001/discuss?page=${page}&pageSize=${pageSize}`,
            type: "GET",
            headers: {
                token: token
                    // : localStorage.getItem('mytoken')
            },
            success: function(res) {
                console.log(res);
                // let size = 5,
                //     page = Math.ceil(res.num / 7),
                //     pageCount = 5;

                //当前选中的页数
                let cur = 1;

                //显示内容列表
                const _content = document.querySelector('.dda')
                const showContent = () => {
                    //每次清空

                    _content.innerHTML = '';
                    _content.innerHTML = `<th width='80'>ID</th>
                    <th>头像</th>
                
                    <th>发表用户</th>
                    <th>评论</th>
                   
                    <th>发表时间</th>
                  
                    <th>操作</th>`
                    res.data.forEach((item, index) => {
                        console.log(item, index);
                        const time = getLocalTime(item.discuss_time)
                            //遍历计算方法，当前为第1页，一页2个，以此类推
                            // console.log(item, index);

                        if (index >= (cur - 1) * pageSize && index < cur * pageSize) {
                            const tr = document.createElement('tr');
                            tr.innerHTML = `<td>${item.id}</td>
                            <td><img class='hear' src='http://192.168.3.184:7001/${item.head_portrait}' /> </td>
                         
                            <td>${item.user_name}</td>
                            <td>${item.comment}</td>
                            <td>${time}</td>
                            <td>
                            <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
                            <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                           
                          
                            </td>`
                                // <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />
                            _content.appendChild(tr)
                        }
                    })
                }
                showContent()



                const pageCount = Math.ceil(res.num / pageSize)
                const _pagination = document.querySelector('.pagination');
                console.log(_pagination);
                const cre = () => {
                    for (let i = 1; i <= pageCount; i++) {
                        const li = document.createElement('li');

                        li.className = 'page-number'
                        li.id = `${i}`
                        li.innerHTML = `${i}`
                        _pagination.appendChild(li)

                    }
                    const a = document.querySelectorAll('.pagination>li');
                    a[0].className = 'co'
                    console.log(a);

                    for (let i = 0; i < a.length; i++) {
                        a[i].addEventListener('click', function(e) {
                            $(e.target).attr('class', 'co').siblings('li').attr('class', 'cc')
                            getPage2(e.target.id, pageSize)

                        })
                    }
                    // _pagination.addEventListener('click', function(e) {
                    //     $(e.target).attr('class', 'co').siblings('li').attr('class', 'cc')


                    //     getPage(e.target.id)
                    // })
                }
                cre();

                //创建分页列表
                const _paginat = document.querySelector('.pagination');
                const createPagination = () => {
                        showContent()
                            //拼接左右按钮
                            //当页数不为1为可点击态
                        let lis = ` <li class="material-icons page-btn page-btn-prev ${cur!==1?'isclick':''}">
                        <img src="./imges/箭头-左.png" alt=""></li>`;

                        if (cur < 1 || cur > page) {
                            throw `cur 参数最小值为1 最大值为${page}`
                        } else if (pageCount < 5) {
                            throw `pageCount 参数最小值5`
                        } else if (page <= pageCount) {
                            //总页数小于等于按钮数。直接遍历，不需省略号
                            for (let i = 1; i <= page; i++) {
                                lis += ` <li class="page-number ${i==cur?'active':''}">${i}</li>`
                            }
                        } else {
                            /// 保存当前分页前后数字按钮
                            let befNum = cur - (pageCount - 3) / 2,
                                aftNum = cur + (pageCount - 3) / 2;

                            //显示左省略按钮
                            if (cur >= pageCount - 1) {
                                lis += `<li class="page-number">1</li>
                                <li class="material-icons page-dot page-dot-prev">...</li>`
                            }

                            //解决显示0页码
                            //af为除去省略号后的一个按钮
                            //同理解决为页数为最大时后面不显示
                            if (cur >= 1 && cur < pageCount - 1) {
                                befNum = 1;
                                aftNum = pageCount - 1;
                            } else if (cur <= page && cur > page - (pageCount - 2)) {
                                aftNum = page
                            }

                            for (let i = befNum; i <= aftNum; i++) {
                                lis += ` <li class="page-number ${i==cur?'active':''}">${i}</li>`
                            }

                        }


                        //显示右省略按钮
                        if (cur <= page - (pageCount - 2)) {
                            lis += ` <li class="material-icons page-dot page-dot-next">...</li>
                        <li class="page-number">${page}</li>`
                        }

                        //拼接右
                        lis += ` <li class="material-icons page-btn page-btn-next ${cur!==page?'isclick':''}"> 
                        <img src="./imges/箭头-右.png" alt=""></li>`;


                        _pagination.innerHTML = lis;


                        //点击切换
                        const _pageNum = document.querySelectorAll('.page-number');
                        _pageNum.forEach((item) => {
                            item.addEventListener('click', () => {
                                //item.inne为字符串。转成数字

                                cur = parseInt(item.innerHTML);
                                console.log(cur);

                                createPagination();

                            })
                        })

                        //下一页
                        const _pagenext = document.querySelector('.page-btn-next');
                        // console.log(_pagenext);
                        _pagenext.addEventListener('click', () => {
                            if (cur !== page) {
                                cur++;
                                createPagination();
                            }
                        })

                        //上一页
                        const _pageprev = document.querySelector('.page-btn-prev');
                        _pageprev.addEventListener('click', () => {
                            if (cur !== 1) {
                                cur--;
                                createPagination();
                            }
                        })


                        //前进PC-2格子
                        //省略号时隐时现
                        var _paDotNext = document.querySelector('.page-dot-next');
                        if (_paDotNext) {
                            _paDotNext.addEventListener('click', () => {
                                cur += pageCount - 2;
                                createPagination();
                            })
                        }



                        //后退PC-2格子
                        //省略号时隐时现，所以用？
                        var _paDotpre = document.querySelector('.page-dot-prev');
                        if (_paDotpre) {
                            _paDotpre.addEventListener('click', () => {
                                cur -= pageCount - 2;
                                createPagination();
                            })
                        }

                    }
                    // createPagination();


            }

        })
    }


    // const p = document.querySelectorAll('.pagination');
    // for (let i = 0; i < p.length; i++) {
    //     p[i].addEventListener('click', function(e) {
    //         console.log(e.target.innerText);
    //         kanliuyan(e.target.innerText, 7)
    //     })

    // }
    // liuyan()

    function liuyan() {
        $.ajax({
            url: `http://192.168.3.184:7001/discuss`,
            type: 'get',
            headers: {
                token
            },
            success: (res) => {
                console.log(res);

                console.log(res);

                const liuyanbiao = document.querySelector('.dda');
                const showdisc = () => {
                    liuyanbiao.innerHTML = '';
                    liuyanbiao.innerHTML = `<th>ID</th>
                    <th>头像</th>
                
                    <th>用户名</th>
                    <th>评论内容</th>
                   
                    <th>发表时间</th>
                    <th>操作</th>`
                }
                showdisc();
                res.data.forEach(item => {
                    console.log(item);
                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td width='50'>${item.id}</td>
                    <td><img class='hear' src='${item.head_portrait}' /></td>
                   
                    <td>${item.user_name}</td>
                    <td id='${item.id}'>${item.comment}</td>
                    <td>${item.discuss_time}</td>
                    <td>
                    <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                    <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
                    <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />
                    </td>`
                    liuyanbiao.appendChild(tr)
                })



            }
        })
    }



    //获取评论详情

    // dicTail()
    var token = localStorage.getItem('mytoken')


    function dicTail(id) {
        $.ajax({
            url: `http://192.168.3.184:7001/discuss/${id}`,
            type: 'get',
            headers: {
                token
            },
            success: (res) => {
                console.log(res);
                console.log(butt1);
                const fwb = document.querySelector('.w-e-text')
                    // console.log(res.data);
                for (const item in res.data) {
                    // console.log(item.comment);
                    // console.log(item[comment]);
                    fwb.innerHTML = res.data.comment

                    butt1.addEventListener('click', function() {
                        console.log(butt1);
                        if (isdisc === 0) {
                            console.log(222222);
                            const text1 = editor.txt.text();
                            // console.log(text1);
                            // console.log(item.user_name, item.comment);
                            disAdd(res.data.comment)
                        } else {
                            console.log(11111);
                            const text_ = editor.txt.text();
                            console.log(text_);
                            gaiDisc(id, item.user_name, text_);
                            boxx.style.display = 'none';
                        }



                    })
                }

            }
        })

    }

    //修改评论
    function gaiDisc(id, user_name, comment) {
        $.ajax({
            url: `http://192.168.3.184:7001/discuss/${id}`,
            type: 'put',
            headers: {
                token
            },
            data: {
                id,
                user_name,
                comment
            },
            success: (res) => {
                console.log(res);
                window.location.reload();
            }
        })
    }
    //添加评论
    function disAdd(comment) {
        $.ajax({
            url: `http://192.168.3.184:7001/discuss`,
            type: 'post',
            headers: {
                token
            },
            data: {
                comment
            },
            success: (res) => {
                console.log(res);
            }
        })
    }


    //删除
    function disDe(id) {
        $.ajax({
            url: `http://192.168.3.184:7001/discuss/${id}`,
            type: 'delete',
            headers: {
                token
            },
            success: (res) => {
                console.log(res);
                window.location.reload();
            }
        })

    }


    //搜索评论
    const searchB = document.querySelector('.search-btn'),
        searchTe = document.querySelectorAll('.search-txt');
    console.log(searchB, searchTe);
    searchB.addEventListener('click', function() {
        const ad = searchTe[0].value;
        seardisc(ad)
    })

    function seardisc(user_name) {
        $.ajax({
            url: `http://192.168.3.184:7001/discuss`,
            type: 'get',
            data: {
                user_name
            },
            headers: {
                token
            },
            success: (res) => {
                console.log(res);
                const _content = document.querySelector('.dda')
                const showContent = () => {
                    //每次清空

                    _content.innerHTML = '';
                    _content.innerHTML = `<th>ID</th>
                    <th>头像</th>
                
                    <th>账号</th>
                    <th>发表评论</th>
                   
                    <th>发表时间</th>
                    <th>操作</th>`
                    res.data.forEach((item, index) => {
                        const time = getLocalTime(item.dicuss_time)
                            //遍历计算方法，当前为第1页，一页2个，以此类推
                            // console.log(item, index);


                        const tr = document.createElement('tr');
                        tr.innerHTML = `<td>${item.id}</td>
                            <td>
                            <img class='hear' src='http://192.168.3.184:7001/${item.head_portrait}' /></td>
                         
                            <td>${item.user_name}</td>
                            <td>${item.comment}</td>
                            <td>${time}</td>
                            <td>
                            <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                            <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
                            <img src='.\\imges\\ussss.png' class="btn " name="gt" data-id='${item.id}' />
                            </td>`
                        _content.appendChild(tr)

                    })
                }
                showContent();

            }
        })
    }

    //获取admin下的li列表
    liLis[0].onclick = function() {
        location.href = 'imgManeger.html'
    }
    liLis[1].onclick = function() {
        location.href = 'zhoubian.html'
    }
    liLis[2].onclick = function() {
        console.log(1);
        location.href = 'tuijian.html'
    }



    const shouye = document.getElementById('shouye');
    shouye.addEventListener('click', function() {
        console.log(1);
        window.location.href = 'http://192.168.3.189:5501/layout/home_page.html'
    })
}